/*
 * @作者: loarn
 * @Date: 2021-10-27 22:35:17
 * @LastEditTime: 2021-10-27 22:53:41
 * @FilePath: \JD.com\js\slider_2.js
 */
/**************** slider_2 **********************/
let sliderBox2 = document.querySelector('.slider-box2');
let imgsBox = document.querySelector('.imgs-box');
let boxCol = document.querySelectorAll('.box-col');
let boxLeft = document.querySelector('.imgs-box-left');
let boxRight = document.querySelector('.imgs-box-right');

let kg = true;
function setSlider2() {
     /* slider-2 */
     let firstI =boxCol[0].cloneNode(true)
     let lastI =boxCol[2].cloneNode(true)
 
     imgsBox.appendChild(firstI);
     imgsBox.insertBefore(lastI,boxCol[0]);
     // 重新获取一下bg
    boxCol = document.querySelectorAll('.box-col');
     // 给ul设置宽度
     imgsBox.style.width =boxCol.length *boxCol[0].offsetWidth + 'px';
     // 设置ul的初始left属性(显示图片1)
     imgsBox.style.left = -boxCol[0].offsetWidth + 'px'
     // 重新获取ul
     imgsBox = document.querySelector('.imgs-box')
}
setSlider2();

/* 自动滚动 */
let m = 1;
let timer2 = setInterval(() => {
    if (!kg) return
    kg = false;
    m++;
    play2();
}, 5000);
sliderBox2.onmouseenter = () => clearInterval(timer2);
sliderBox2.onmouseleave = () => {
    if (!kg) return
    kg = false;
    m++;
    play2();
    timer2 = setInterval(() => {
        if (!kg) return
        kg = false;
        m++;
        play2()
    }, 5000)
}

/* 上下页 */
boxLeft.onclick = () => {
    if (!kg) return
    kg = false;
    m--;
    play2();
}
boxRight.onclick = () => {
    console.log(123)
    if (!kg) return
    kg = false;
    m++;
    play2();
}

/* slider-2******* */
// 封装一个轮播图片和圆点高亮显示的函数
function play2() {
    // 调用运动函数
    move(imgsBox, {
        left: -m * boxCol[0].offsetWidth
    }, function () {
        // console.log(123);
        // 如果n = 3,则此时显示的应该是第一张图片li
        if (m == 4) {
            m = 1;
        }
        if (m == 0) { // 如果索引为0这上次显示的是图片1，此时需要显示图片3
            m = 3;
        }
        imgsBox.style.left = -m * boxCol[0].offsetWidth + 'px';
        // // 小圆点跟随高亮显示
        // for (let i = 0; i < olis.length; i++) {
        //     olis[i].className = '';
        // }
        // olis[n - 1].className = 'active';
        // 运动结束则将开关打开
        kg = true;
    })
}